<template>
  <div>
    <el-timeline v-if="processHistory && processHistory.length">
      <el-timeline-item
        v-for="(group, i) in processHistory"
        :key="i"
        type="primary"
        placement="top"
        :timestamp="group.list[0].createTime | moment('YYYY-MM-DD HH:mm:ss') ">
        <el-card>
          <h3 style="font-weight: bold;">节点：{{group.list[0].taskName}}</h3>
          <div v-for="(item, index) in group.list" :key="index">
            <van-divider v-if="index > 0" />
            <p>操作者：{{item.taskAssigneeName}}</p>
            <p v-if="item.notifyName">知会人员：{{item.notifyName}}</p>
            <template v-if="item.taskSign">
              <p>签名：</p>
              <el-image :src="item.taskSign" :preview-src-list="[item.taskSign]" 
                fit="scale-down" style="width: 100px; height: 100px"></el-image>
            </template>
            <template v-if="item.taskAuditStatus === 0 || item.taskAuditStatus === 1">
              <p>审核状态：
                <!-- <el-tag v-if="item.taskAuditStatus === null">未审核</el-tag> -->
                <el-tag v-if="item.taskAuditStatus == 1" type="success">审核通过</el-tag>
                <el-tag v-else type="danger">审核不通过</el-tag>
              </p>
              <p>审核意见：{{item.taskComment}}</p>
            </template>
            <p>完成时间：<span v-if="item.finishTime">{{ item.finishTime | moment('YYYY-MM-DD HH:mm:ss') }}</span></p>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <EmptyComp v-else />
  </div>
</template>

<script>
import { queryHisTask } from '@/api/workflow/bpmn/runtime'
import EmptyComp from '@/components/EmptyComp'

export default {
  components: { },
  data() {
    return {
      processInstanceId: '',
      processHistory: [] // 流程日志
    }
  },
  created() {
    
  },
  methods: {
    async queryHisTask(processInstanceId) { // 流程日志
      this.processInstanceId = processInstanceId
      this.processHistory = []
      if (!processInstanceId) return
      const res = await queryHisTask(processInstanceId)
      if (res.data) {
        const field = 'taskDefinitionKey'
        // 将数据按taskDefinitionKey分组，因为会签的信息要放在一个节点上显示
        this.processHistory = this.groupArr(res.data, field)
      }
    },
    groupArr(list, field) { // 对数组按某个字段分组
      var fieldList = [],att=[]
      list.map((e, index)=>{
        e[field] = e[field] ? e[field] : index
        fieldList.push(e[field])
      })
      //数组去重
      fieldList = fieldList.filter((e,i,self)=>{
        return self.indexOf(e)==i
      })
      for(var j=0;j<fieldList.length;j++){
        //过滤出匹配到的数据
        var arr = list.filter((e)=>{
          return e[field] == fieldList[j]
        })
        att.push({
          list:arr
        })
      }
      return att
    }
  }
}
</script>
<style scoped>

</style>
